<template>
<Row class="layout-content-body">
  <h3 v-if="serv" style="text-align:center;">{{Serv?Serv.Name:""}} —— 售后服务</h3>
  <dtable :columns="columns" :dataAll="dataAll" 
  :totals="totals" :busyName="busyName" :busyTable="busyTable" 
  check editCheck  :add="add" @add="addService"
  @sortOrder="sortOrder" @edit="edit"
  @refresh="refresh"  @changePage="changePage" @search="getall" 
  @changeSize="changeSize"  :loading="loading"></dtable>
  <Modal title="服务信息" v-model="editData" :mask-closable="false" class-name="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate" label-position="left">
       <Form-item label="解决状态" prop="Resolve">
        <RadioGroup v-model="formItem.Resolve">
          <Radio label="0">
              <span>未解决</span>
          </Radio>
          <Radio label="1">
              <span>解决中</span>
          </Radio>
          <Radio label="2">
              <span>已解决</span>
          </Radio>
        </RadioGroup>
      </Form-item>
      <Form-item label="异常信息" prop="Expection">
        <Input v-model="formItem.Expection" placeholder="请输入" type="textarea"></Input>
      </Form-item>
      <Form-item label="原因" prop="Reason">
        <Input v-model="formItem.Reason" placeholder="请输入" type="textarea"></Input>
      </Form-item>
      <Form-item label="售后内容" prop="Content">
        <Input v-model="formItem.Content" placeholder="请输入" type="textarea"></Input>
      </Form-item>
     
    </Form>
  </Modal>
</Row>
</template>

<script>
import { timeFormat, currency } from "@/common/filter";
import dtable from "@/components/table/btable.vue"; //采用biztable
export default {
  data() {
    return {
      Serv: null,
      loading: false, //数据刷新遮罩层
      busyName: "服务实例",
      busyTable: "yjk_serv",
      columns: [
        //多选框
        {
          title: "名称",
          key: "Name",
          sortable: true
        },
        {
          title: "存在问题",
          key: "Expection",
          sortable: true
        },
        {
          title: "状态",
          key: "Resolve",
          render: (h, { row }) => {
            let str = "其它",
              color = "default";
            switch (row.Resolve) {
              case "0":
                str = "为解决";
                color = "red";
                break;
              case "1":
                str = "解决中";
                color = "orange";
                break;
              case "2":
                str = "已解决";
                color = "green";
                break;
              default:
                break;
            }
            return h("Tag", {props: {type:"border", color: color}}, str)
          }
        },
        {
          title: "售后",
          key: "ResolveUser",
          sortable: true
        },
        {
          title: "名称",
          key: "Name",
          sortable: true
        },
        {
          title: "型号",
          key: "Model",
          sortable: true
        },
        {
          title: "地址",
          key: "Address",
          sortable: true
        },
        {
          title: "电话",
          key: "Phone",
          sortable: true
        },
        {
          title: "联系人",
          key: "Contact",
          sortable: true
        },
        {
          title: "账号",
          key: "Account",
          sortable: true
        },
        {
          title: "说明",
          key: "Remark",
          sortable: true
        },
        {
          title: "责任人",
          key: "Creater",
          sortable: true
        },
        {
          title: "创建时间",
          key: "Ctime",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("strong", timeFormat(params.row.Ctime, "YYYY-MM-DD"))
            ]);
          }
        }
      ], //表格样式
      ruleValidate: {
        Content: [
          {
            required: true,
            message: "请填写服务内容",
            trigger: "blur"
          }
        ],
        Expection: [
          {
            required: true,
            message: "请填写异常信息",
            trigger: "blur"
          }
        ],
        Reason: [
          {
            required: true,
            message: "请填写异常原因",
            trigger: "blur"
          }
        ],
        Resolve: [
          {
            required: true,
            message: "请选择解决状态",
            trigger: "change"
          }
        ]
      }, //数据编辑表单验证规则
      dataAll: [], //表格数据来源
      templist: [],
      formItem: {},
      tpl: {
        Resolve: "",
        Expection: "",
        Reason: "",
        Content: "",
        ServId: ""
      },
      dataShow: true, //是否显示表格数据查看表单
      showTemp: false,
      editData: false,
      totals: 10,
      orderData: {
        edit: false,
        temp: ""
      },
      pagedata: {
        pagesize: 10,
        page: 1,
        searchKey: "",
        sortby: ["Ctime"],
        order: ["desc"],
        query: {
          Status: "1",
          Isdelete: "0"
        }
      }
    };
  },
  components: {
    dtable
  },
  computed: {
    add() {
      return this.$route.params.servId ? true : false;
    },
    serv() {
      return this.$route.params.servId;
    }
  },
  watch: {},
  methods: {
    addService() {
      this.formItem = JSON.parse(JSON.stringify(this.tpl));
      this.formItem.ServId = this.$route.params.servId;
      this.formItem.Resolve = "2";
      this.editData = true;
    },
    refresh() {
      this.getall(this.pagedata);
    },
    getall(pd) {
      this.loading = true;
      this.$api.getAllService(pd).then(res => {
        if (!res.error) {
          console.log(res.Data);
          this.dataAll = res.Data.data;
          this.totals = res.Data.total;
        } else {
          this.$Message.error(res.message);
        }
      });
      this.loading = false;
    },
    edit(index) {
      this.formItem = index;
      this.editData = true;
    },
    asyncOK() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.$api
            .addService(this.formItem)
            .then(res => {
              if (res.code == 0) {
                this.$Message.success("添加售后成功");
                this.asyncCancel();
                this.getall(this.pagedata);
              }
            })
            .catch(err => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("表单验证失败!");
          this.asyncCancel();
        }
      });
      // this.editData = false;
      // this.$refs["editForm"].resetFields();
    },
    asyncCancel() {
      this.formItem = {};
      this.$refs["editForm"].resetFields();
    },
    handelSelect(row) {
      this.$emit("handelSelect", row);
    },
    //      改变页码大小
    changeSize(current) {
      this.pagedata.page = current;
      this.getall(this.pagedata);
    },
    //      改变页码
    changePage(current) {
      console.log(current);
      this.pagedata = current;
      this.getall(this.pagedata);
    },
    //      排序
    sortOrder(current) {
      console.log(current);
      this.pagedata = current;
      this.getall(this.pagedata);
    },
    getServiceById() {
      this.$api
        .getServById({ servId: this.$route.params.servId })
        .then(res => {
          if (res.code == 0) {
            this.Serv = res.Data;
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
    }
  },
  mounted() {
    if (this.$route.params.servId) {
      this.pagedata.query["ServId"] = this.$route.params.servId;
      this.getServiceById();
    }
    this.getall(this.pagedata);
  }
};
</script>
